<template>
  <div id="app">
    <!-- <a href="#/home">home</a> | 
    <a href="#/about">about</a> | 
    <a href="#/category">category</a>
    <hr>
    <router-link to="/home" replace>首页</router-link> | 
    <router-link to="/category" replace>分类</router-link> | 
   <router-link to="/about" tag="button">关于</router-link> -->
    <!-- <router-link to="/about" replace custom v-slot="{ navigate }">
      <button @click="navigate">关于</button>
    </router-link> -->
    <button @click="toHome">首页</button>
    <button @click="toCategory">分类</button>
    <button @click="toAbout">关于</button>
    <hr>
      <button @click="toadd">用户新增</button>
      <button @click="todel">用户删除</button>
      <button @click="toupdate">用户修改</button>
      <button @click="tolist">用户查询</button>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
import Category from './components/Category.vue'
import User from './components/User.vue'

export default {
  name: 'App',
  data:function (){
    return {
      
    }
  },
  components: {
    Home,
    About,
    Category,
    User
  },
  methods:{
    toHome(){
      this.$router.push('/home');
    },
    toCategory() {
      this.$router.push('/category');
    },
    toAbout() {
      this.$router.push('/about');
    },
    toadd(){
      this.$router.push('/user/add');
    },
    todel() {
      this.$router.push('/user/del');
    },
    toupdate() {
      this.$router.push('/user/update');
    },
    tolist() {
      this.$router.push('/user/list');
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.router-link-active {
  color: red;
  text-decoration: underline;
}
</style>
